<template>
  <div class="left-side">
    <div class="left-side-inner">
      <el-menu class="menu-box" theme="dark" :router="true" :default-active="$route.path">
        <div v-for="(item, index) in nav_menu_data" :key="index">
          <el-menu-item class="menu-list" v-if="typeof item.children === 'undefined'" :index="item.path">
            <i class="icon fa" :class="item.icon"></i>
            <span v-text="item.title" class="text"></span>
          </el-menu-item>
          <el-submenu :index="item.path" v-else>
            <template slot="title">
              <i class="icon fa" :class="item.icon"></i>
              <span v-text="item.title" class="text"></span>
            </template>
            <el-menu-item
              class="menu-list"
              v-for="(sub_item, sub_index) in item.children"
              :index="sub_item.path"
              :key="sub_index"
              v-if="sub_item.title === '呼叫中心' ? (userInfo.power < 3 || userInfo.power === 5 ? true : false ) : true">
              <span v-text="sub_item.title" class="text"></span>
            </el-menu-item>
          </el-submenu>
        </div>
      </el-menu>
    </div>
  </div>
</template>
<script>
export default {
  name: 'slide',
  data() {
    return {
      nav_menu_data: []
    }
  },
  computed: {
    userInfo() {
      return this.$store.getters.getUserInfo
    }
  },
  methods: {
    _spliceSideBar(arr) {
      let newArr = [];
      newArr.push(arr[0])
      let sideArr = require('../../json/left-slideber.json')
      const { power, userGroup, userName} = this.$store.getters.getUserInfo
      for (let i = 0; i < arr.length; i++) {
        //张双喜
        if(power==99){
          for(let k=0;k<sideArr.formal.length;k++){
           if(sideArr.formal[k].title==='客服管理'){
              for(let j=0;j<sideArr.formal[k].children.length;j++){
                if(sideArr.formal[k].children[j].title==='管理在线客服'){
                  newArr.push(sideArr.formal[k].children[j])
                }
              }
            }
          }
          return newArr
        }
        // 质检报表只有质检组才显示
        if (userGroup !== '质检组' && arr[i].title === '呼叫中心') {
          let subArrZJ = arr[i].children
          for(let k = 0;k < subArrZJ.length;k++){
            if(power !== 1 && subArrZJ[k].title === '质检报表'){
              subArrZJ.splice(k,1)
              k--
            }
          }
          arr[i].children = subArrZJ
        }
        if(userGroup === '质检组' && arr[i].title === '会员管理'){
          let subArrZJ = arr[i].children
          for(let k = 0;k < subArrZJ.length;k++){
            if(subArrZJ[k].title !== '会员列表'){
              subArrZJ.splice(k,1)
              k--
            }
          }
        }
        if(userGroup === '质检组' && arr[i].title === '客服管理'){
           let subArrZJ = arr[i].children
          for(let k = 0;k < subArrZJ.length;k++){
            if(subArrZJ[k].title !== '客服监控' && subArrZJ[k].title !== '排班管理' && subArrZJ[k].title !== '计划任务'){
              subArrZJ.splice(k,1)
              k--
            }
          }
        }
        // 答疑组不显示数据报表
        if ((userGroup === '答疑组' || userGroup === '质检组' || userGroup==='回访组') && arr[i].title === '数据报表') {
          arr.splice(i, 1)
          i--
        }
        if ((userGroup === '答疑组' || userGroup === '回访组' ) && arr[i].title === '会员管理') {
          let subArr = arr[i].children
          for(let k = 0;k < subArr.length;k++){
            if(subArr[k].title === '回款列表'){
              subArr.splice(k,1)
              k--
            }
          }
          arr[i].children = subArr
        }
        if(power!=1 && arr[i].title === '数据报表'){
          let subArr = arr[i].children
          for(let k = 0;k < subArr.length;k++){
            if(subArr[k].title === '测试'){
              subArr.splice(k,1)
              k--
            }
          }
          arr[i].children = subArr
        }
        if (arr[i].title === '客服管理') {
          let tmpa = arr[i].children
          for (let j = 0; j < tmpa.length; j++) {
            // 当登录客服为组员的时候，不显示排班管理和客服监控
            if (power === 3 &&
              tmpa[j] &&
              (tmpa[j].title === '排班管理' || tmpa[j].title === '客服监控')
            ) {
              tmpa.splice(j, 1)
              j--
            }
            if(power!=1 && tmpa[j] && tmpa[j].title === '客户分配'){
                tmpa.splice(j, 1)
                j--
            }
            // 只有答疑组的组长和副组长可以看用户建议，今日统计，查询验证码三张表
            
            if (!(userGroup === '答疑组' && power === 2) &&
              tmpa[j] &&
              (tmpa[j].title === '用户建议')
            ) {
              tmpa.splice(j, 1)
              j--
            }

            // 暂时隐藏  查询验证码  手机短信管理
            if (tmpa[j] &&
              // (tmpa[j].title === '查询验证码' || tmpa[j].title === '手机短信管理')
              (tmpa[j].title === '查询验证码' || tmpa[j].title === '今日统计' || tmpa[j].title === '手机短信管理')
            ) {
              tmpa.splice(j, 1)
              j--
            }

            // 管理在线客服(夏寒梦和组长)
            if(!(power === 2 || userName === '夏寒梦' || userName ==='admin' ||userName==='质检') && tmpa[j] && tmpa[j].title === '管理在线客服'){
              tmpa.splice(j, 1)
              j--
            }
            
           
            if(!(userGroup ==='答疑组' && power===2) && tmpa[j] && tmpa[j].title === '银行卡信息' && userName !='夏寒梦'){
              
              tmpa.splice(j, 1)
              j--
            }
          }
        }
      }
      return arr
    },
    getSildeBar: function() {
      const { power, userGroup } = this.$store.getters.getUserInfo
        let sideArr = require('../../json/left-slideber.json')
        if (power === 4) {
          sideArr = this._spliceSideBar(sideArr.Internship)
        } else {
          sideArr = this._spliceSideBar(sideArr.formal)
        }
        // if (power === 3) {
        //   //  当登录客服为组员的时候，不显示排班管理
        //   sideArr = this._splicePBGL(sideArr)
        // }
        this.nav_menu_data = sideArr
    }
  },
  mounted: function() {
    this.getSildeBar()
  }
}
</script>
<style lang="scss">
.left-side {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index:1;
  width: 200px;
  height: 100%;
  overflow-y: auto;
  background-color: #343f55;
  .menu-box {
    background-color: #343f55;
    .menu-list,
    .el-submenu__title {
      height: 45px;
      line-height: 45px;
      color: #fff;
      background-color: #343f55;
      .icon {
        width: 16px;
        font-size: 14px;
      }
      .text {
        margin-left: 10px;
      }
      &.is-active,
      &:hover {
        background-color: #353f4f !important;
        color: #20a0ff;
      }
    }
  }
}
</style>

